<template>
  <div class="container">
    <el-dialog title="预览文章" :visible="previewDialog" width="35%" @close="handleClose">
      <el-row style="padding-left: 10px">
        <h2>{{ formData.title }}</h2>
      </el-row>
      <el-row style="border-bottom: 1px dashed #ccc; padding: 10px 0px">
        <span>{{ formatTime(formData.createTime) }}</span>
        <span>{{ formData.username }}</span>
        <i class="el-icon-view"></i><span>{{ formData.visits }}</span>
      </el-row>
      <el-row>
        <div class="ql-container ql-snow">
          <div class="ql-editor">
            <div class="body" v-html="formData.articleBody"></div>
          </div>
        </div>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import dayjs from 'dayjs'
export default {
  props: {
    previewDialog: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      formData: {} // 表单数据
    }
  },
  methods: {
    // 对话框关闭
    handleClose () {
      this.formData = {}
      this.$emit('update:previewDialog', false)
    },
    // 格式化时间
    formatTime (time) {
      return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  h2 {
    margin: 0;
    font-weight: 700;
  }
  span {
    margin-left: 10px;
  }
  i {
    margin-left: 10px;
  }
  .body {
    background: #f5f5f5;
    padding: 10px;
  }
  // 编辑器样式配置
  .ql-container.ql-snow {
    border: none; //去边框
    .ql-editor {
      padding: 0; //去默认边距
      font-size: 14px; //设置字体大小
    }
  }
}

/**
        <div class="ql-container ql-snow">
          <div class="ql-editor">
            <div class="body" v-html="xxxxxxxxx.xxxxxxx"></div>
          </div>
        </div>

        quill-editor 的数据回显 使用 外面这两层div+类名包上
        解决图片超出问题 内容文字会居中显示 更优雅
*/
</style>
